/**
 * 学习目标：react - 更新的生命周期
 * 时机： 1. setState 2.props 改变时会触发更新
 * 1. render - 把页面准备好
 * 2. componentDidUpdate - 类似vue中的更新完成
 * 注意点：
 * 1.react 更新，指的是数据更新，不管页面有没有变化，都会触发componentDidUpdate
 *   vue 更新，指的是页面的变化，那么数据虽然改变了， 但是页面不会更新
 *
 * 2. 不要再 render 或者 componentDidUpdate 调用 setState,会死循环
 */
import React from 'react';

export default class App extends React.Component {
  // state = { count: 100 };
  // domRef = React.createRef()
  // 很久之前，按照es6中class的写法
  // constructor作用：继承父类，和定义自身属性
  // 不建议发请求：1. 语义不好 2. 请求崩了会白屏
  constructor() {
    // super,继承父类,并且把this指向当前class
    super();
    // 定义自身属性
    this.state = { count: 100 };
    this.domRef = React.createRef();
    // console.log('constructor完成 -----> ');
  }

  componentDidMount() {
    // console.log(
    //   'componentDidMount渲染完成 -----> ',
    //   document.querySelector('#dom')
    // );
  }
  componentDidUpdate() {
    console.log('App - componentDidUpdate完成');
    // 💥💥不要再 render 或者 componentDidUpdate 调用 setState
    // this.setState({ count: this.state.count + 1 });
  }

  render() {
    console.log('App - render完成 -----> ');
    // 💥💥不要再 render 或者 componentDidUpdate 调用 setState
    // this.setState({ count: this.state.count + 1 });
    return (
      <div id="dom">
        <button
          onClick={() => {
            this.setState({ count: this.state.count + 1 });
          }}
        >
          点我修改 count{' '}
        </button>
        我是App组件
        {/* <Child count={this.state.count}></Child> */}
      </div>
    );
  }
}
// class Child extends React.Component {
//   componentDidUpdate() {
//     console.log('Child - componentDidUpdate完成');
//   }
//   render() {
//     console.log('Child - render完成 -----> ');
//     const { count } = this.props;
//     return <div>我是Child组件 - {count}</div>;
//   }
// }
